<template>
    <div class="array-node">
        <base-node :pname="pname" :multiline="true">
            <template #begin>
                <span style="color:#fa8c16;margin-right: 0.5em;">array</span>
                <strong>[</strong>
            </template>
            <template #default>
                <template v-for="(sitem, sindex) in pvalue">
                    <node-switch :pname="sindex" :pvalue="sitem"></node-switch>
                </template>
            </template>
            <template #end>
                <strong>]</strong>
            </template>
        </base-node>
    </div>
</template>

<script lang="ts">
import _ from "lodash";
import { Component, Prop, Vue } from "vue-property-decorator";
import BaseNode from "./BaseNode.vue";

@Component({
    components: {
        BaseNode,
        NodeSwitch: () => import("./NodeSwitch.vue")
    }
})
export default class ArrayNode extends Vue {
    @Prop() public pname!: string;
    @Prop() public pvalue!: any[];
}
</script>